<template>
	<scroll-view class="rui-tabs" scroll-x="true" @scroll="scroll" scroll-with-animation :scroll-left="scrollLeft">
		<view class="rui-tabs_item" :id="'TAB_'+index" :class="index == current ?'rui-tabs_action':''"
			v-for="(item, index) in list" :key="index" @click="change(index, item)">{{item.name}}</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	let current = ref(0)
	let scrollLeft = ref(0)

	let list = ref([{
			id: 1,
			name: "跟团旅游"
		},
		{
			id: 2,
			name: "私家小团"
		},
		{
			id: 3,
			name: "拼车小团"
		},
		{
			id: 4,
			name: "旅游包车"
		},
		{
			id: 5,
			name: "定制旅游"
		},
		{
			id: 6,
			name: "旅游攻略"
		},
		{
			id: 6,
			name: "旅游攻略"
		},
		{
			id: 6,
			name: "旅游攻略"
		},
		{
			id: 6,
			name: "旅游攻略"
		},
		{
			id: 6,
			name: "旅游攻略"
		},
		{
			id: 6,
			name: "旅游攻略"
		},
	])

	const change = function(index, data) {
		current.value = index;
		uni.createSelectorQuery().select("#TAB_" + index)
			.boundingClientRect((data) => {
				scrollLeft.value = data.width * index - data.width
			})
			.exec();
	}

	const scroll = e => {
		// console.log(e.detail.scrollLeft)

	}
</script>

<style lang="scss" scoped>
	.rui-tabs {
		white-space: nowrap;
		width: 100%;
		// position: relative;
		z-index: 2;
		position: sticky;
		top: 0;
		background: #f5f5f5;

		::-webkit-scrollbar {
			display: none;
		}

		&_action {
			font-size: 32rpx;
			font-weight: bold;
			position: relative;
			&::after{
				content: "";
				display: block;
				position: absolute;
				bottom: 0;
				width: 100rpx;
				height: 4rpx;
				background: var(--color);
				left: 0;
				right: 0;
			}

			&::before {
				content: "";
				display: block;
				height: 50rpx;
				width: 100rpx;
				border-radius: 30rpx;
				background-image: url();
				background-size: 65rpx;
				background-repeat: no-repeat;
				background-position: center;
				position: absolute;
				bottom: 5rpx;
				left: calc(50% - 50rpx);
				z-index: -1;
			}
		}

		&_item {
			display: inline-block;
			text-align: center;
			padding: 15px;
			// transition: all .7s;
		}
	}
</style>